<template>
  <div class="all">
    <div class="top">
      <span @click="goback()">&lt;</span>
      <div class="search">想吃什么搜一搜</div>
      <i class="iconfont icon-hongbao"></i>
      <i class="iconfont icon-hongbao"></i>
      <i class="iconfont icon-hongbao"></i>
    </div>
    <div class="diancan">
      <span class="s8">点餐</span>
      <span class="s8">评价</span>
      <span class="s8">商家</span>
      <span class="pindan">好友拼单</span>
    </div>
    <div class="shop">
      <div class="sticy">
        <div class="nav" v-for="(v, i) in arr" :key="i">{{ v }}</div>
      </div>
      <div class="goodsbox">
        <div class="goodslist" v-for="(v, i) in arry" :key="i">
          <img
            src="../images/Screenshot_2022-02-21-15-26-47-35_92b64b2a7aa6eb3_03.png"
            alt=""
          />
          <div class="wenben">
            <h2>{{ v.name }}</h2>
            <p>{{ v.info }}</p>
            <div class="teshu">
              <span>${{ v.price }}</span
              ><span class="s2">${{ v.oldprice }}</span>
              <div class="update" v-if="goodsarr.indexOf(v.id) !== -1">
                <b @click="reduce(v.id, goodsnumarr[goodsarr.indexOf(v.id)])"
                  >-</b
                >
                <input
                  @change="reflash($event.target.value, v.id)"
                  type="number"
                  min="1"
                  max="10"
                  readonly
                  :value="goodsnumarr[goodsarr.indexOf(v.id)]"
                />
                <b @click="add(v.id, goodsnumarr[goodsarr.indexOf(v.id)])">+</b>
              </div>
              <i
                class="iconfont icon-add_circle"
                v-else
                @click="upgoods(v.id)"
              ></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="img">
        <img src="../images/shoping_02.png" alt="" />
      </div>
      <div class="zongjia">
        <span>${{ this.sum }}</span>
        <span>免配送费</span>
      </div>
      <div class="jiesuan">$15起送</div>
    </div>
  </div>
</template>

<script>
import { getlink } from "@/api/getlink.js";
export default {
  data() {
    return {
      sum: 0,
      id: 0,
      arr: [],
      arry: [],
      arrall: [],
    };
  },
  computed: {
    goodsarr() {
      if (this.arrall !== null) {
        const arr = [];
        this.arrall.forEach((item) => {
          arr.push(item[0]);
        });
        return arr;
      }
      return [];
    },
    goodsnumarr() {
      if (this.arrall !== null) {
        const arr = [];
        this.arrall.forEach((item) => {
          arr.push(item[1]);
        });
        return arr;
      }
      return [];
    },
  },
  methods: {
    getsum() {
      this.sum = 0;
      //购物车商品总价格获取
      console.log("**********");
      console.log(this.arry);
      console.log(this.arrall);

      for (let i in this.arrall) {
        this.sum += this.arry[i].price * this.arrall[i][1];
      }
      this.sum = this.sum.toFixed(1);
      console.log(this.sum);
      console.log("**********");
    },
    reduce(id, value) {
      if (this.$store.state.userid !== -1) {
        getlink("/data/update", "get", {
          shopid: this.id,
          goodsid: id,
          goodsnums: --value,
        }).then(() => {
          getlink("/data/goodscart", "get", {
            shopid: this.id,
            userid: this.$store.state.userid,
          }).then((ok) => {
            console.log(ok.data);
            this.arrall = ok.data;
            console.log(this.arrall);
          });
        });
      } else {
        this.$router.push("/login");
      }
    },
    add(id, value) {
      if (this.$store.state.userid !== -1) {
        getlink("/data/update", "get", {
          shopid: this.id,
          goodsid: id,
          goodsnums: ++value,
        }).then(() => {
          getlink("/data/goodscart", "get", {
            shopid: this.id,
            userid: this.$store.state.userid,
          }).then((ok) => {
            console.log(ok.data);
            this.arrall = ok.data;
            console.log(this.arrall);
          });
        });
      } else {
        this.$router.push("/login");
      }
    },
    reflash(value, id) {
      getlink("/data/update", "get", {
        shopid: this.id,
        goodsid: id,
        goodsnums: value,
      }).then(() => {
        getlink("/data/goodscart", "get", {
          shopid: this.id,
          userid: this.$store.state.userid,
        }).then((ok) => {
          console.log(ok.data);
          this.arrall = ok.data;
          console.log(this.arrall);
        });
      });
    },
    upgoods(id) {
      if (this.$store.state.userid !== -1) {
        getlink("/data/update", "get", {
          shopid: this.id,
          goodsid: id,
          goodsnums: 1,
        }).then(() => {
          getlink("/data/goodscart", "get", {
            shopid: this.id,
            userid: this.$store.state.userid,
          }).then((ok) => {
            console.log(ok.data);
            this.arrall = ok.data;
            console.log(this.arrall);
          });
        });
      } else {
        this.$router.push("/login");
      }
    },
    goback() {
      this.$router.go(-1);
    },
  },
  mounted() {
    // 购物车中的商品获取
    // this.$store.commit("upshopname", { newshopname: this.id });
    this.id = this.$store.state.shopid;
    getlink("/data/json").then((ok) => {
      this.arr = ok.data.shangjia[this.id].goodstype;
      this.arry = ok.data.shangjia[this.id].goodslist;
      console.log(this.arry);
    });
    if (this.$store.state.userid !== -1) {
      getlink("/data/goodscart", "get", {
        shopid: this.id,
        userid: this.$store.state.userid,
      }).then((ok) => {
        this.arrall = ok.data;
        console.log(this.arrall);
      });
    }
  },
  beforeUpdate() {
    this.getsum();
  },
};
</script>

<style scoped>
.s8 {
  font-size: 0.16rem;
  font-weight: 700;
  margin-right: 0.38rem;
}
.pindan {
  margin-left: 0.7rem;
  width: 0.66rem;
  height: 0.24rem;
  color: skyblue;
  border: 1px solid skyblue;
  border-radius: 0.2rem;
  font-size: 0.12rem;
  text-align: center;
  line-height: 0.24rem;
}
.search {
  width: 1.75rem;
  height: 0.34rem;
  border-radius: 0.3rem;
  background-color: rgb(199, 199, 199);
  color: #656565;
  text-align: center;
  line-height: 0.34rem;
}
.top > i {
  font-size: 0.3rem;
  margin: 0;
}
.s2 {
  text-decoration: line-through;
  margin-left: 0.08rem;
}
i {
  margin-left: 0.3rem;
  font-size: 0.3rem;
  color: skyblue;
}
p {
  margin-bottom: 0.1rem;
}
h2 {
  font-size: 0.16rem;
  font-weight: 700;
  margin-bottom: 0.1rem;
}
.wenben {
  width: 1.8rem;
  height: 1.1rem;
  padding: 0 0.1rem;
  word-wrap: break-word;
}
img {
  width: 1rem;
  height: 1rem;
  border-radius: 0.1rem;
}
.all {
  width: 100%;
  background-color: #fff;

  font-size: 0.16rem;
  overflow: hidden;
}
.top {
  width: 100%;
  height: 0.74rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-left: 0.2rem;
}
.top > span {
  font-size: 0.18rem;
}
.diancan {
  width: 100%;
  height: 0.34rem;
  padding: 0 0.1rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.shop {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: sticky;
  top: 0.1rem;
}
.goodsbox {
  width: 3rem;
  height: 7rem;
  overflow: auto;
}
.nav {
  width: 0.76rem;
  height: 0.54rem;
  background-color: #f5f5f5;
  border-top-right-radius: 0.1rem;
  text-align: center;
  line-height: 54px;
  font-size: 0.12rem;
  color: #656565;
}
.sticy {
  width: 0.78rem;
  height: 6rem;
  background-color: #f5f5f5;
  overflow: auto;
}
.goodsbox::-webkit-scrollbar {
  display: none;
}
.sticy::-webkit-scrollbar {
  display: none;
}
.goodslist {
  width: 3rem;
  height: 1.4rem;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bottom {
  width: 3.74rem;
  height: 0.5rem;
  position: fixed;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #fff;
}
.img > img {
  width: 0.77rem;
  height: 0.5rem;
}
.zongjia {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 1.7rem;
}
.jiesuan {
  width: 1.18rem;
  height: 0.4rem;
  background-color: #999999;
  border-radius: 0.2rem;
  text-align: center;
  line-height: 0.4rem;
}
.update {
  margin-left: 0.12rem;
  font-size: 0.16rem;
  width: 0.8rem;
  height: 0.3rem;
  display: flex;
  justify-content: space-between;
}
.update > b {
  width: 0.25rem !important;
  height: 0.25rem !important;
  border-radius: 50%;
  background-color: skyblue;
  text-align: center;
  line-height: 0.25rem;
  font-size: 0.2rem;
}
.update > input {
  width: 0.2rem;
  height: 100%;
  text-align: center;
}
.teshu {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
</style>